﻿@model Zatify.WebUI.Models.PromotionTimingViewModel
@{
    ViewBag.Title = "Promotion Timing";
    ViewBag.ContentTitle = "Promotion Timing";
    Layout = "~/Views/Shared/_ContentLayout.cshtml";
}
@section Styles
{
    <style type="text/css">
        .inner_container
        {
            float: none;
        }
        .ui-datepicker-trigger
        {
            margin-left: 5px;
        }
        /* css for timepicker */
        .ui-timepicker-div .ui-widget-header
        {
            margin-bottom: 8px;
        }
        .ui-timepicker-div dl
        {
            text-align: left;
        }
        .ui-timepicker-div dl dt
        {
            height: 25px;
            margin-bottom: -25px;
        }
        .ui-timepicker-div dl dd
        {
            margin: 0 10px 10px 65px;
        }
        .ui-timepicker-div td
        {
            font-size: 90%;
        }
        .ui-tpicker-grid-label
        {
            background: none;
            border: none;
            margin: 0;
            padding: 0;
        }
        
        .ui-timepicker-rtl
        {
            direction: rtl;
        }
        .ui-timepicker-rtl dl
        {
            text-align: right;
        }
        .ui-timepicker-rtl dl dd
        {
            margin: 0 65px 10px 10px;
        }
        
        .input-append.date
        {
            float: left;
            margin-right: 30px;
        }
        .promo_timing_start_end
        {
            width: 100%;
        }
        .promo_timing_start_end > div
        {
            float: left;
        }
        .promotion_proximity_radius_line > label
        {
            display: inline;
            margin-bottom: 0;
        }
    </style>
    <link href="@Url.Content("~/Content/bootstrap/bootstrap-combined.min.css")" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" media="screen" href="@Url.Content("~/Content/bootstrap/bootstrap-datetimepicker.min.css")" />
}
@section Scripts
{
    <script type="text/javascript" src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/bootstrap/bootstrap-datetimepicker.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/bootstrap/bootstrap-datetimepicker.pt-BR.js")"></script>
    <script type="text/javascript">

        var tempFlatFee = parseFloat(@Model.PromotionCompaignFlatFee);
        var tempCost = parseFloat(@Model.PromotionCompaignCost);

        $(function () {

             $('#dtpScheduledAtDate').datetimepicker({ pickTime: false });
             $('#dtpScheduledAtTime').datetimepicker({ 
                pickDate: false,
                pick12HourFormat: true,// enables the 12-hour format time picker
                pickSeconds: false 
              });
        
             $('#dtpBaseCostTimingStartAtDate').datetimepicker({ pickTime: false });
             $('#dtpBaseCostTimingStartAtTime').datetimepicker({ 
                pickDate: false,
                pick12HourFormat: true,// enables the 12-hour format time picker
                pickSeconds: false 
              });
             
             $('#dtpBaseCostTimingEndAtDate').datetimepicker({ pickTime: false });
             $('#dtpBaseCostTimingEndAtTime').datetimepicker({ 
                pickDate: false,
                pick12HourFormat: true,// enables the 12-hour format time picker
                pickSeconds: false 
              });

              var dateTime = new Date();
              $('#ClientDateTime').val((dateTime.getMonth()+1) + '/' + dateTime.getDate() + '/' + dateTime.getFullYear() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes());
        });

//        function dateTimingChanged()
//        {
//            var radioBtn = $(this).find("input[type=radio]");
//            console.warn(radioBtn);
//        }

        function onCompaignTimingChanged(id, flatFee, cost) {

            $("#BaseCostTimingId").val(id);

            var flatFee = parseFloat(flatFee);
            var cost = parseFloat(cost);

            $("#TimingCost").val(parseFloat(cost).toFixed(2));

            $("#PromotionCompaignFlatFee").val(parseFloat(tempFlatFee + flatFee));
            $("#PromotionCompaignCost").val(parseFloat(tempCost + cost));

            $("#compaignCost").text("$" + parseFloat($("#PromotionCompaignFlatFee").val()).toFixed(2) + "/flat and $" + parseFloat($("#PromotionCompaignCost").val()).toFixed(2) + "/push");
        }

    </script>
}
<div class="business_interface_area">
    @using (Html.BeginForm())
    {
        @Html.HiddenFor(m => m.ClientDateTime)
        
        @Html.HiddenFor(m => m.PromotionId)
        @Html.HiddenFor(m => m.BaseCostTimingId)

        @Html.HiddenFor(m => m.PromotionCompaignFlatFee)
        @Html.HiddenFor(m => m.PromotionCompaignCost)

        @Html.HiddenFor(m => m.TimingCost)
        @Html.HiddenFor(m => m.TimingFlatFee)

        @Html.HiddenFor(m => m.BaseCost)
        @Html.HiddenFor(m => m.InstantNowCost)
        @Html.HiddenFor(m => m.InstantNowFlatFee)
        @Html.HiddenFor(m => m.ScheduledAtCost)
        @Html.HiddenFor(m => m.ScheduledAtFlatFee)
        @Html.HiddenFor(m => m.DateRangeWithTimeIntervalCost)
        @Html.HiddenFor(m => m.DateRangeWithTimeIntervalFlatFee)
        <div class="business_profile_categories">
            <div class="campaign_category_selection">
                Choose Campaign Timing</div>
            <div class="promotion_proximity_radius_line">
                <label>
                    <input type="radio" name="CampaignTiming" class="categories_radio" value="2" 
                    onclick="onCompaignTimingChanged(@Zatify.WebUI.Models.PromotionConstants.TIMING_INSTANT_NOW, @Model.InstantNowFlatFee, @Model.InstantNowCost)"
                    @(Model.BaseCostTimingId == Zatify.WebUI.Models.PromotionConstants.TIMING_INSTANT_NOW ? "checked = 'checked'" : String.Empty)/>
                    Instant - Now (expires 7 days after start)
                </label>
                <span>+$@Model.InstantNowFlatFee.ToString("0.00")/flat and $@Model.InstantNowCost.ToString("0.00")/push</span>
            </div>
            <div class="promotion_proximity_radius_line">
                <label>
                    <input type="radio" name="CampaignTiming" class="categories_radio" value="3" 
                    onclick="onCompaignTimingChanged(@Zatify.WebUI.Models.PromotionConstants.TIMING_SCHEDULED_AT, @Model.ScheduledAtFlatFee, @Model.ScheduledAtCost)" 
                    @(Model.BaseCostTimingId == Zatify.WebUI.Models.PromotionConstants.TIMING_SCHEDULED_AT ? "checked = 'checked'" : String.Empty)/>
                    Scheduled at
                    <div class="promo_timing_start_end">
                        <div id="dtpScheduledAtDate" class="input-append date">
                            @Html.TextBoxFor(m => m.BaseCostTimingScheduledAtDate, new { style = "width: 100px" })
                            <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <div id="dtpScheduledAtTime" class="input-append date">
                            @Html.TextBoxFor(m => m.BaseCostTimingScheduledAtTime, new { data_format = "hh:mm", style = "width: 100px" })
                            <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-time"></i>
                            </span>
                        </div>
                    </div>
                    (expires 7 days after start)
                </label>
                <span>+$@Model.ScheduledAtFlatFee.ToString("0.00")/flat and $@Model.ScheduledAtCost.ToString("0.00")/push</span>
            </div>
            <div class="promotion_proximity_radius_line">
                <label>
                    <input type="radio" name="CampaignTiming" class="categories_radio" value="5" 
                    onclick="onCompaignTimingChanged(@Zatify.WebUI.Models.PromotionConstants.TIMING_ONGOING_WITH_DATE_RANGE, @Model.DateRangeWithTimeIntervalFlatFee, @Model.DateRangeWithTimeIntervalCost)" 
                    @(Model.BaseCostTimingId == Zatify.WebUI.Models.PromotionConstants.TIMING_ONGOING_WITH_DATE_RANGE ? "checked = 'checked'" : String.Empty)/>
                    Date range with time interval
                    <br />
                    <br />
                    <div class="promo_timing_start_end">
                        <div>
                            <span style="float: left;">Start Date</span>
                            <br />
                            <div id="dtpBaseCostTimingStartAtDate" class="input-append date">
                                @Html.TextBoxFor(m => m.BaseCostTimingStartsDate, new { style = "width: 100px" })
                                <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                            </div>
                        </div>
                        <div>
                            <span style="float: left;">End Date</span>
                            <br />
                            <div id="dtpBaseCostTimingEndAtDate" class="input-append date">
                                @Html.TextBoxFor(m => m.BaseCostTimingEndsDate, new { style = "width: 100px" })
                                <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <br />
                    <div class="promo_timing_start_end">
                        <div>
                            <span style="float: left;">Time interval(runs on scheduled dates during these hours)</span>
                            <br />
                            <div>
                                <div id="dtpBaseCostTimingStartAtTime" class="input-append date">
                                    @Html.TextBoxFor(m => m.BaseCostTimingStartsTime, new { data_format = "hh:mm", style = "width: 100px" })
                                    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                                </div>
                            </div>
                            <div>
                                <div id="dtpBaseCostTimingEndAtTime" class="input-append date">
                                    @Html.TextBoxFor(m => m.BaseCostTimingEndsTime, new { data_format = "hh:mm", style = "width: 100px" })
                                    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </label>
                <span>+$@Model.DateRangeWithTimeIntervalFlatFee.ToString("0.00")/flat and $@Model.DateRangeWithTimeIntervalCost.ToString("0.00")/push</span>
                <div class="promo_timing_text">
                    (Up to 7 days interval only)</div>
            </div>
            <p class="campaign_cost_rate">
                Campaign Cost: <span id="compaignCost">$@((Model.PromotionCompaignFlatFee + Model.TimingFlatFee).ToString("0.00"))/flat
                    and $@((Model.PromotionCompaignCost + Model.TimingCost).ToString("0.00"))/push</span>
            </p>
            <input type="submit" value="Next" class="blue_btn" style="margin-left: 0px;" />
            @Html.ValidationSummary()
        </div>
        <div class="clearfix">
        </div>
    }
</div>
